<template>
  <div>
    <button @click="getSome">点击请求</button>
    <button @click="test1">测试一</button>
    <button @click="test2">测试二</button>
    <button @click="test3">测试三</button>
  </div>
</template>

<script>
import axios from 'axios' // 1. 导入 axios
export default{
   name:"AxiosDemo",
   data(){
     return{
       msg:"axios",

     }
   },
   methods:{
     // get请求
         getSome(){
             axios.get("http://localhost:9090/esp/get")
             .then(response=>{
                  console.log(response.data);
             })
             .catch(function(e){
                 console.log("报错了"+e)
             })
       },
       //传参数get方式
       test1(){
         axios.get("http://localhost:9090/esp/get1?id=12345")
         .then(response =>{
             console.log(response.data);
         }).catch(function(e){
           console.log("报错了"+e);
         })

       },
       test2(){
         axios.get("http://localhost:9090/esp/get1",{
                  params: {
                        id: "34563"
                      }
              })
         .then(response =>{
             console.log(response.data);
         }).catch(function(e){
           console.log("报错了"+e);
         })

       },
       test3(){
         // 1. 创建一个 URLSearchParams 对象
           const params = new URLSearchParams();
           // 2. 使用 .append() 方法添加参数
           params.append('firstName', 'Fred');
           params.append('lastName', 'Flintstone');

         axios.post('http://localhost:9090/esp/post1', params)
         .then(response =>{
             console.log(response.data);
         }).catch(function(e){
           console.log("报错了"+e);
         })

       }

   }
}
</script>

<style>
</style>


/***
# 1. 卸载当前版本
npm uninstall axios
# 2. 安装指定的旧版本
npm install axios@0.21.4

这个是vue2  遇到了问题  解决方法是降低了axios的版本

  @ResponseBody
    @RequestMapping("/get")
    public Map<String, Object> get() {
    	Map<String, Object> map=new HashMap<String, Object>();
    	map.put("id", "1");
    	map.put("age", 12);
    	map.put("name", "张三");
    	return map;
    }
    
    @ResponseBody
    @RequestMapping("/get1")
    public Map<String, Object> get1(String id) {
    	Map<String, Object> map=new HashMap<String, Object>();
    	map.put("id", id);
    	map.put("age", 12);
    	map.put("name", "张三");
    	return map;
    }
    
    @ResponseBody
    @PostMapping("/post1")
    public Map<String, Object> post1(
    		@RequestParam("firstName")  String firstName,
    		@RequestParam("lastName")   String lastName) {
    	Map<String, Object> map=new HashMap<String, Object>();
    	map.put("id", "1");
    	map.put("age", 12);
    	map.put("firstName", firstName);
    	map.put("lastName", lastName);
    	map.put("name", "张三");
    	return map;
    }
***/
